<template>
  <!--执行页-电话簿-发送短信 -->
  <section class="component send-message">
    <el-form ref="form" :rules="rules" label-width="120px" inline :model="model">
      <el-form-item label="逾期阶段">
        <el-input v-model="overduePeriod" disabled></el-input>
      </el-form-item>
      <el-form-item label="短信模板名称" prop="templateId">
        <el-select v-model="model.templateId" placeholder="请选择" clearable @change="onTemplateContentChange">
          <el-option v-for="item in templateDataSet" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="短信内容" prop="templateContent">
        <el-input type="textarea" :maxlength="500" v-model="model.templateContent" class="templateContent"></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Action, namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { TemplateService } from "~/services/domain-service/template.service";

@Component({})
export default class SendMessage extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  @Dependencies(TemplateService)
  private templateService: TemplateService;

  @Prop({ required: true })
  private caseId: string;

  @Prop({ required: true })
  private contactsData: any;

  private overduePeriod: string = "";

  private templateDataSet: any[] = [];

  private rules: any = {
    templateId: [{ required: true, message: "请输入模板名称" }]
  };

  private contactModel = {
    personalContactId: "",
    relationship: "",
    targetName: "",
    mobileNo: ""
  };
  private model: any = {
    templateId: "",
    templateContent: ""
  };

  public refresh() {
    const form: any = this.$refs['form']
    form.resetFields()
    this.caseOperatorPageService.queryCaseInfo(this.caseId).subscribe(data => {
      this.overduePeriod = "M" + data.overduePeriod;
    });
  }

  @Emit("close")
  private close() {
  }

  @Watch("overduePeriod")
  private onOverduePeriod(val) {
    if (!val) {
      this.templateDataSet = [];
      return;
    }
    let overduePeriod: string = "";
    if (val && Number.parseInt(val.substr(1)) >= 6) {
      overduePeriod = "M6";
    }
    const request: any = {
      overduePeriod: val && Number.parseInt(val.substr(1)) >= 6 ? 'M6' : val,
      templateCategory: "MESSAGE"
    };
    this.templateService
      .getTemplateByOverduePeriod(request)
      .subscribe(data => (this.templateDataSet = data || []));
  }

  private onTemplateContentChange(templateId) {
    this.caseOperatorPageService
      .getTemplateContent({ caseId: this.caseId, templateId })
      .subscribe(data => (this.model.templateContent = data));
  }

  private commit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;
      const request: any = {
        caseId: this.caseId,
        templateId: this.model.templateId,
        contIds: [this.contactsData.id],
        templateContent:this.model.templateContent
      };
      this.caseOperatorPageService.sendMessage(request).subscribe(data => {
        this.$message.success("发送成功!");
        this.close();
      });
    });
  }
}
</script>

<style scoped lang="less">
.component.send-message {
  .templateContent {
    width: 485px;
  }
}
</style>
